<template>
  <swiper :slides-per-view="3" :space-between="0" :pagination="{ clickable: true }" @swiper="onSwiper" @slideChange="onSlideChange" @init="onInit" :modules="modules">
    <template #container-start><span>开头</span></template>
    <template #container-end><div>结尾</div></template>
    <template v-slot:wrapper-end><div>wrapper结尾</div></template>
    <swiper-slide>slide 1</swiper-slide>
    <swiper-slide v-slot="abc">slide2{{ abc.isActive }}</swiper-slide>
    <swiper-slide>slide 3</swiper-slide>
    <swiper-slide>slide 4</swiper-slide>
    <swiper-slide>slide 5</swiper-slide>
    <swiper-slide>slide 6</swiper-slide>
    <swiper-slide>slide 7</swiper-slide>
    <swiper-slide>slide 8</swiper-slide>
    <swiper-slide>slide 9</swiper-slide>
  </swiper>
  <my-test-component></my-test-component>
  <CTest ref="c-test"></CTest>
  <c-test></c-test>
  <Phone></Phone>
  <phone></phone>
  <div class="box" v-once>
    {{ 1 + 1 }}
  </div>
  <div class="box" v-once>
    {{ a + b }}
  </div>
  <transition mode="out-in" appear :duration="150">
    <div :key="a">
      {{ a + b }}
    </div>
  </transition>
  <my-transition mode="out-in" name="fade" appear :duration="150" :value="a + b">
    <div :key="a">
      {{ a + b }}
    </div>
  </my-transition>
  <button @click="add">添加</button>
  <button @click="swiper1.slideNext()">下一个</button>
</template>
<script lang="jsx">
import { h } from 'vue'
import { Swiper,SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper/modules'
import MyTestComponent from './components/MyTestComponent.vue'
import CTest from './components/CTest.vue'
import Phone from './components/Phone.vue'
import MyTransition from './components/arm-liang-transition/arm-liang-transition.vue'
import 'swiper/css'
import 'swiper/css/pagination'
import { markRaw } from 'vue'
export default{
  components : {
    Swiper,
    SwiperSlide,
    MyTestComponent,
    CTest,
    Phone,
    MyTransition
  },
  data(){
    return {
      a : 1,
      b : 2,
      swiper1 : null,
      modules : markRaw([Pagination]),
    }
  },
  methods : {
    onSwiper(e){
      console.log(e)
    },
    onSlideChange(e){
      console.log(e);
    },
    onInit(e){
      console.log(e);
      this.swiper1 = e;
    },
    next(){
      this.swiper1.slideNext();
    },
    add(){
      let c = this.$refs['c-swiper'];
      console.log(`helloworld`);
      this.a++;

      c = this.$refs['c-test'];
      if(this.a % 2){
        c.show();
      }else{
        c.hide();
      }
    }
  },
  mounted(){
    const vnode = h(
      'div', // type
      { id: 'foo', class: 'bar' }, // props
      [
        /* children */
      ]
    )
    console.log(vnode);

    const app = <input type="text"/>;
    console.log(app);
  }
}
</script>
<style type="text/css" lang="scss">
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

@mixin anim($animName) {
  .#{$animName} {
    &-enter,
    &-leave-to {
      @content;
    }

    &-enter-active,
    &-leave-active {
      transition: all 0.3s;
    }
  }
}

body {
  @include anim(fade) {
    opacity: 0;
  }

  @include anim(slide-top) {
    opacity: 0;
    transform: translateY(-21px);
  }

  @include anim(slide-bottom) {
    opacity: 0;
    transform: translateY(19px);
  }

  @include anim(slide-right) {
    opacity: 0;
    transform: translateX(19px);
  }

  @include anim(slide-left) {
    opacity: 0;
    transform: translateX(-21px);
  }

  @include anim(zoom) {
    opacity: 0.3;
    transform: scale(0.5);
  }
}
</style>
